<template>
	<view class="page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="top" :model="userInfo" ref="uForm" labelWidth="200">
			<u-form-item label="请输入姓名" prop="name">
				<u--input v-model="userInfo.name" placeholder="请输入姓名"></u--input>
			</u-form-item>
			<u-form-item label="请输入账号" prop="email">
				<u--input v-model="userInfo.email" placeholder="请输入账号"></u--input>
			</u-form-item>

			<u-form-item label="请选择性别" prop="sex">
				<u-radio-group v-model="userInfo.sex" placement="row">
					<u-radio style="width: 50%" activeColor="#501c59" name="1" label="男士"></u-radio>
					<u-radio style="width: 50%" activeColor="#501c59" name="0" label="女士"></u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="请选择出生城市" prop="city">
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<text class="city">{{ regionName }}</text>
				</pick-regions>
			</u-form-item>

			<u-form-item label="请输入生日" prop="birthday">
				<view class="birthday" @click="showCalendar = true">
					<image class="icon" src="../../static/icon/ic_dob.png" mode="widthFix"></image>
					<view>{{ celenderValue }}</view>
					<e-run-calendar
						ref="betterCalendarRef"
						:showCalendar="showCalendar"
						@confirm="selectDate"
						:isHourShow="true"
						@cancel="showCalendar = false"
						:selectOptions="selectOptionsArr"
					></e-run-calendar>
				</view>
			</u-form-item>
			<u-form-item label="请输入密码" prop="password">
				<u-input v-model="userInfo.password" placeholder="请输入密码" :type="showPassword ? 'text' : 'password'">
					<template slot="suffix">
						<u-icon color="#787979" size="48rpx" @click="showPassword = !showPassword" :name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="请输入手机号" prop="phone">
				<u-input placeholder="请输入手机号" v-model="userInfo.phone">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<text class="sendCode" @tap="getCode">{{ tips }}</text>
						<!-- <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button> -->
					</template>
				</u-input>
			</u-form-item>

			<u-form-item label="请输入验证码" prop="code">
				<u--input v-model="userInfo.code" placeholder="请输入验证码"></u--input>
			</u-form-item>
		</u--form>

		<u-checkbox-group v-model="agreement">
			<u-checkbox activeColor="#501c59" name="heihei"></u-checkbox>
			<text class="agreement">我已阅读并同意 《隐私协议》与《用户使用协议》</text>
		</u-checkbox-group>

		<text @click="submit" class="submit">注册</text>
	</view>
</template>

<script>
// https://blog.csdn.net/Lyn1421/article/details/130426865
// https://dayjs.fenxianglu.cn/category/display.html#%E6%A0%BC%E5%BC%8F%E5%8C%96
import eRunCalendar from '@/uni_modules/e-run-calendar/components/e-run-calendar/e-run-calendar.vue';
import httpApi from '../../http/index.js';
export default {
	components: {
		eRunCalendar
	},
	data() {
		return {
			showSex: false,
			userInfo: {
				name: '林琦',
				sex: '1',
				city: '',
				birthday_type: '',
				email: '1045654',
				province: '',
				year: '',
				month: '',
				day: '',
				hours: '',
				minute: '',
				password: '123123',
				code: '123456',
				phone: '13219990622',
				pid: ''
			},
			region: [],
			defaultRegion: [],
			defaultRegionCode: '110000',
			showCalendar: false, //是否显示组件
			celenderValue: '请选择生日', //选择值
			selectOptionsArr: [30, 0, 0, 0, 0], //起始年份
			showPassword: false,
			tips: '',
			agreement: [],
			rules: {
				name: {
					type: 'string',
					required: true,
					message: '请填写真实姓名',
					trigger: ['blur']
				},
				email: {
					type: 'string',
					required: true,
					min: 6,
					message: '请填写账号，并且长度不低于6位',
					trigger: ['blur']
				},
				sex: {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择性别',
					trigger: ['change']
				},
				city: {
					type: 'string',
					required: true,
					message: '请选择出生城市',
					trigger: ['change']
				},
				birthday: {
					type: 'string',
					required: true,
					message: '请选择出生城市',
					trigger: ['change']
				},
				password: {
					type: 'string',
					required: true,
					min: 6,
					message: '请输入密码，并且长度不低于6位',
					trigger: ['blur']
				},
				phone: {
					type: 'string',
					required: true,
					len: 11,
					message: '请输入正确的手机号码',
					trigger: ['blur']
				},
				code: {
					type: 'string',
					required: true,
					len: 6,
					message: '请输入正确的验证码',
					trigger: ['blur']
				}
			}
		};
	},

	onReady() {
		console.log(this.$refs.uForm);
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			if (!this.agreement[0]) {
				uni.$u.toast('请先阅读协议!');
				return;
			}
			this.$refs.uForm
				.validate()
				.then((res) => {
					httpApi.LoginApi.register(this.userInfo).then((res) => {
						console.log(res.data.token);
						uni.setStorageSync('token', res.data.token);
						uni.switchTab({
							url: '/pages/mall/index/index'
						});
					});
				})
				.catch((errors) => {
					uni.$u.toast('参数有误!');
				});
		},
		codeChange(text) {
			this.tips = text;
		},

		getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				httpApi.LoginApi.send({
					phone: this.userInfo.phone,
					type: 'register'
				}).then((res) => {
					console.log(res.data);
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				});
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		sexSelect(e) {
			this.userInfo.sex = e.name;
		},
		// 获取选择的地区
		handleGetRegion(region) {
			this.userInfo.province = region[0].name || '';
			this.userInfo.city = region[1].name || '';
			this.region = region;
		},

		selectDate(e) {
			let type = 0;
			e.type === 'solar' ? (type = 1) : (type = 0);
			e.minutes == 0 ? (e.minutes = '00') : (e.minutes = e.minutes);
			e.hour == '0-1' ? (e.hour = '00') : (e.hour = e.hour);
			this.userInfo.year = e.year;
			this.userInfo.month = e.month;
			this.userInfo.day = e.day;
			this.userInfo.hours = e.hour;
			this.userInfo.minute = e.minutes;

			this.userInfo.birthday_type = type;
			this.userInfo.birthday = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minutes}`;
			this.celenderValue = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minutes}`;
			this.showCalendar = false;
		}
	},

	computed: {
		regionName() {
			// 转为字符串
			return this.region.map((item) => item.name).join(' ') || '点击选择城市';
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 20rpx 64rpx;
	height: 1740rpx;
	.city {
		display: block;
		margin-top: 10rpx;
		width: 622rpx;
		border: 1px solid #f0f0f0;
		padding: 20rpx 10rpx;
	}
	.birthday {
		width: 622rpx;
		margin-top: 10rpx;
		border: 1px solid #f0f0f0;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
		.icon {
			width: 48rpx;
			margin-right: 20rpx;
		}
	}
	.sendCode {
		border-left: 2rpx solid #979797;
		padding-left: 18rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}
	.agreement {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 34rpx;
		font-style: normal;
	}
	.submit {
		width: 622rpx;
		height: 100rpx;
		background: $uni-theme-color;
		border-radius: 4rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
}
</style>
